
 <template>
 	<view >
 		<view class="uni-row input-item">
 			<view class="input-name">收件人</view>
			<view class="input">
				<input type="text" v-model="name" placeholder="请填写收件人姓名" placeholder-style="font-size:28rpx;color:#999999" />
			</view>
 		</view>
		<view class="uni-row input-item">
 			<view class="input-name">手机号</view>
			<view class="input">
				<input type="text" v-model="phone" placeholder="请填写收件人手机号" placeholder-style="font-size:28rpx;color:#999999" />
			</view>
 		</view>
 		
 		<view class="uni-row input-item">
 			<view class="input-name">选择地区</view>
			<view class="input" @tap="address_show_action()">
				<input type="text"  disabled="true"  v-model="diqu" placeholder="请选择所在的区域" placeholder-style="font-size:28rpx;color:#999999" />
			</view>
 		</view>
 
 		<view class="uni-row input-item"style="width:686rpx ;height:224rpx;">
 		    <textarea  placeholder="填写详细地址"  v-model="addressinfo" style="width:686rpx ;height:224rpx;padding:20rpx 43rpx;font-size: 28rpx;" placeholder-style="font-size:28rpx;color:#999999"/>
 		</view>
 		
 	    <button class="big-btn" @tap="tijiaodizhi()">{{btn_text}}</button>
 	
		<!-- 地址弹出框 -->
		<view v-show="address_show">
			<view class="mark"></view>
			<view class="address-container">
				<view class="address-title border-bottom">
					<text v-if="choose_address.province">{{choose_address.province}}——</text><text v-if="choose_address.city">{{choose_address.city}}——</text><text v-if="choose_address.town">{{choose_address.town}}</text>
					<image src="../../static/images/pay-close.png" style="float: right;width: 32rpx;height: 32rpx;" @tap="close_address()"></image>
				</view>
				<view class="uni-row">
					<view class="address-item" style="border-right: 1px solid #F2F2F2;">
						<scroll-view scroll-y="true" class="scroll-view">
							<view>
								<view class="city-name " v-for="(item,index) in provinces" :key="index" @tap="xuanzedizhi" :data-id="item.id" :data-index="index">
									<image :src="item.img"></image>
									{{item.name}}
								</view>
							</view>
						</scroll-view>
					</view>
					<view class="address-item" style="padding-left: 32rpx;box-sizing: border-box;border-right: 1px solid #F2F2F2;">
						<scroll-view scroll-y="true" class="scroll-view">
							<view>
								<view class="city-name " v-for="(item,index) in citys" @tap="xuanzecity" :data-id="item.id" :data-name="item.name">
									<image :src="item.img"></image>
									{{item.name}}
								</view>
							</view>
						</scroll-view>
					</view>
					<view class="address-item" style="padding-left: 32rpx;box-sizing: border-box;">
						<scroll-view scroll-y="true" class="scroll-view">
							<view>
								<view class="city-name " v-for="(item,index) in townlist" @tap="xuanzetown" :data-id="item.id" :data-name="item.name">
									<image :src="item.img"></image>
									{{item.name}}
								</view>
							</view>
						</scroll-view>
					</view>
				</view>
			</view>	
		</view>
 	</view>
 </template>
 
 <script>
	import {getlogin} from "@/static/js/login.js";
 	import httpPath from '@/static/js/path.js';
 	export default {
 			data() {
 				return {
 					address_show:false,
 					amapPlugin: null,
 					provinces:[],
 					citys:[],
 					choosedprovinces:"",
 					key: '127a8a73b4bb644c0893d7a4d14b246a',
 					region:{},
 					choosedcity:"",
 					choose_address:{},
 					townlist:[],
 					provincesindex:0,
 					cityindex:0,
 					diqu:"",
 					name:"",
 					phone:"",
 					wxinfo_id:"1",
 					addressinfo:"",
					
					id:"",
					btn_text:"保存",
					title:"添加收货地址",
 					userinfo:{},
 				}
 			},
 			onShow() {
 				
 			},
 			onLoad(option) {
 				this.userinfo = getlogin()
 				this.wxinfo_id = this.userinfo.wxinfo_id;
				if(option.id){
					this.id=option.id;
					this.btn_text="确认修改";
					this.title="修改收货地址";
					uni.setNavigationBarTitle({
						title:this.title
					})
					this.getinfo();
				}else{
					this.id="";
				}
				
				
 			},
 			methods: {
				getinfo(){
					uni.request({
						url: httpPath.filePath+'/index/address/inquire',
						method:'POST',
						header:{'content-type':'application/x-www-form-urlencoded'},
						data: {
							wxinfo_id:this.wxinfo_id,
							id:this.id
						},
						success: (res) => {
						    if(res.data.code==200){
								this.name=res.data.data.name;
								this.phone=res.data.data.phone;
								this.addressinfo=res.data.data.address;
								this.choose_address.provinceid=res.data.data.province_id;
								this.choose_address.province=res.data.data.province_name;
								this.choose_address.cityid=res.data.data.city_id;
								this.choose_address.city=res.data.data.city_name;
								this.choose_address.townid=res.data.data.county_id;
								this.choose_address.town=res.data.data.county_name;
								 this.diqu=this.choose_address.province+this.choose_address.city+this.choose_address.town;
							}else{
								uni.showModal({
									content:res.data.msg
								})
							}
							
						}
									
					});
					
				},

 				/**
 				 * 确认上门服务
 				 */
 				tijiaodizhi(){
 					
 					let $phone=/^1(3|4|5|6|7|8|9)\d{9}$/;
 					if(this.name==""||this.name==null){
 						uni.showModal({
 							showCancel:false,
 							content:"请填写收件人"
 						})
 						return false;
 					}
 					if(this.phone==""||this.phone==null){
 						uni.showModal({
 							showCancel:false,
 							content:"请填写联系电话"
 						})
 						return false;
 					}
 					
 					
 					if(!$phone.test(this.phone)){
 						uni.showModal({
 							showCancel:false,
 							content:"请填写正确的手机号"
 						})
 						return false;
 					}
 					if(!this.choose_address.provinceid){
 						uni.showModal({
 							showCancel:false,
 							content:"请选择区域"
 						})
 						return false;
 					}else if(!this.choose_address.cityid){
 						uni.showModal({
 							showCancel:false,
 							content:"请选择区域"
 						})
 						return false;
 					}else if(!this.choose_address.townid){
 						uni.showModal({
 							showCancel:false,
 							content:"请选择区域"
 						})
 						return false;
 					}
 					if(this.addressinfo==""||this.addressinfo==null){
 						uni.showModal({
 							showCancel:false,
 							content:"请填写详细地址"
 						})
 						return false;
 					}
					let url="";
					let datas={};
					if(!this.id==""){
						url="/index/address/publish"
						datas={
							id:this.id,
							wxinfo_id:this.wxinfo_id,
							name:this.name,
							phone:this.phone,
							province_id:this.choose_address.provinceid,
							city_id:this.choose_address.cityid,
							county_id:this.choose_address.townid,
							address:this.addressinfo,
							
							}
					}else{
						url="/index/address/add"
						datas={  
							wxinfo_id:this.wxinfo_id,
							name:this.name,
							phone:this.phone,
							province_id:this.choose_address.provinceid,
							city_id:this.choose_address.cityid,
							county_id:this.choose_address.townid,
							address:this.addressinfo,
							
						}
					}
 					uni.request({
 						url: httpPath.filePath+url,
 						method:'POST',
 						header:{'content-type':'application/x-www-form-urlencoded'},
 						data: datas,
 						success: (res) => {
 						    if(res.data.code==200){
 								uni.navigateBack()
 							}else{
 								uni.showModal({
 									content:res.data.msg
 								})
 							}
 							
 						}
 									
 					});
 					
 				},
 				/**
 				 * 获得地区
 				 */
 				getaddress(){
 					uni.request({
 						url: httpPath.filePath+'/index/regoin/index',
 						method:'POST',
 						header:{'content-type':'application/x-www-form-urlencoded'},
 						data: {},
 						success: (res) => {
 						   uni.setStorage({
 							   key: 'address',
 							   data: res.data.data.region,
 							   success: function () {
 								  
 							   }
 						   });
 							
 						}
 				
 					});
 				},close_address(){
 					this.address_show=false;
 				},address_show_action(){
 				let $this=this;
 				$this.provinces=[];
 				const address = uni.getStorageSync('address');
 				if(!address){
 					this.getaddress();
 				}
 				uni.getStorage({
 				    key: 'address',
 				    success: function (res) {
 						$this.region=res.data;
 						for (let i=0;i<res.data.length;i++ ) {
 							$this.provinces.push({name:res.data[i].name,id:res.data[i].id,checked:0,img:"../../static/images/weixuanzhong.png"})
 						}
 					}
 				})
 				this.address_show=true;
 			},/**
 			 *选择省
 			 */
 			xuanzedizhi(e){
 				
 				let $this=this;
 				this.citys=[];
 				let id= e.currentTarget.dataset.id;
 				let index= e.currentTarget.dataset.index;
 				for (let i=0;i<$this.region.length;i++ ) {
 					if($this.region[i].id==id){
 						$this.provincesindex=i;
 						$this.provinces[i].img="../../static/images/xuanzhong.png"
 						$this.provinces[i].check=1;
 						// $this.choosedprovinces = $this.provinces[i].name;
 						$this.choose_address.province = $this.provinces[i].name;
 						$this.choose_address.provinceid = $this.provinces[i].id;
 						for (let j=0;j<$this.region[i].city.length;j++ ) {
 							$this.citys.push({name:$this.region[i].city[j].name,id:$this.region[i].city[j].id,checked:0,img:"../../static/images/weixuanzhong.png"})
 						}
 						
 					}else{
 						$this.provinces[i].img="../../static/images/weixuanzhong.png"
 						$this.provinces[i].check=0;
 					}
 				}
 				
 			},/**
 			 * 选择市
 			 */
 			xuanzecity(e){
 				let $this=this;
 				this.choose_address.cityid= e.currentTarget.dataset.id;
 				this.choose_address.city= e.currentTarget.dataset.name;
 				let citylist=this.region[this.provincesindex].city;
 				
 	            for (let j=0;j<citylist.length;j++ ) {
 	            	if(citylist[j].id==this.choose_address.cityid){
 						this.cityindex=j;
 						$this.citys[j].img="../../static/images/xuanzhong.png"
 						$this.citys[j].check=1;
 						let townlist= citylist[j].county;
 					    console.log(townlist)
 						this.townlist=[];
 						for (let a = 0; a <townlist.length; a++) {
 							
 							this.townlist.push({name:townlist[a].name,id:townlist[a].id,checked:0,img:"../../static/images/weixuanzhong.png"})
 						}
 						
 					}else{
 						$this.citys[j].img="../../static/images/weixuanzhong.png"
 						$this.citys[j].check=0;
 					}
 	            }
 			},/**
 			 * 选择区县
 			 */
 			xuanzetown(e){
 				let $this=this;
 				this.choose_address.townid= e.currentTarget.dataset.id;
 				this.choose_address.town= e.currentTarget.dataset.name;
 				let townslist=this.region[this.provincesindex].city[this.cityindex];
 				
 				for (let j=0;j<townslist.length;j++ ) {
 					if(townslist[j].id==this.choose_address.townid){
 						this.cityindex=j;
 						$this.townlist[j].img="../../static/images/xuanzhong.png"
 						$this.townlist[j].check=1;
 					}else{
 						$this.townlist[j].img="../../static/images/weixuanzhong.png"
 						$this.townlist[j].check=0;
 					}
 				}
 				this.diqu=this.choose_address.province+this.choose_address.city+this.choose_address.town;
 				this.address_show=false;
 			},
 			}
 		}
 </script>
 
 <style lang="scss">
	 .input-item{width:686rpx!important;margin:20rpx auto!important;box-sizing: border-box;}
	 .input-name {padding-left: 43rpx;box-sizing: border-box;}
	 .big-btn{position: fixed;bottom: 50rpx;left: 115rpx;}
 	
     .showgray {
         color: #808080;
     }
     .input switch{float: right;margin-top: 7rpx;}
	 .address-title{font-size: 32rpx;font-weight: bold;color: #7ADBA8;text-align: center;padding-bottom: 20rpx;}
	 .scroll-view{height: 100%;}
	 .city-name{height: 90rpx;line-height: 90rpx;font-size: 28rpx;color: #666;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}
	 .city-name image{width: 36rpx;height: 36rpx;vertical-align: middle;margin-right: 20rpx;}
	 .address-container{z-index:100000;position: fixed;bottom: 0rpx;left: 0px;background: #fff;height: 662rpx;padding: 32rpx;box-sizing: border-box;width: 100%;}
	 .address-item{width: 33.3%;height: 550rpx;box-sizing: border-box;}
 </style>
 